<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>组件基础</title>
    <!-- Delete ".min" for console warnings in development -->
    <script src="../vue.js"></script>

  </head>
  <body>

    <!-- app -->
    <div id="app">
      组件基础 — Vue.js<br />
      https://cn.vuejs.org/v2/guide/components.html<br />
      <br />
      <button-counter></button-counter>
      <button-counter>点我</button-counter>
    </div>

    <script>

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  // data:{
    // count:0
  // },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

var app = new Vue({
  el: '#app',

})


    </script>
  </body>
</html>
